<template>
    <div style="padding: 10px 15px;">
        <el-card>
            <el-row type="flex" justify="space-between">
                <!-- <el-input v-model="searchValue" class="search-input" placeholder="请输入你需要搜索的内容" clearable>
            </el-input> -->
                <el-button type="primary" @click="handleAddStore">新增</el-button>
            </el-row>

            <div class="table-container">
                <el-table :data="data">
                    <el-table-column prop="storeId" label="门店ID" align="center"></el-table-column>
                    <el-table-column prop="storeName" label="门店名称" align="center"></el-table-column>
                    <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="handleClickChange(scope.row)">修改</el-button>
                            <el-button size="mini" type="danger" @click="handleClickDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background :current-page.sync="pagination.current" @size-change="handleSizeChange"
                    :page-sizes="[10, 20, 30, 40, 50]" :page-size="pagination.pageSize"
                    @current-change="handleCurrentChange" layout="total, sizes, next, pager, prev"
                    :total="pagination.total">
                </el-pagination>
            </div>
        </el-card>

        <!-- Dialog -->
        <el-dialog title="新增店铺" :visible.sync="dialogVisible" width="40%" :close-on-click-modal="false">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm cus-login-container"
                label-width="100px">
                <el-form-item prop="storeName" label="店铺名">
                    <el-input ref="storeName" type="text" v-model="ruleForm.storeName" name="storeName"
                        placeholder="请输入店铺名" autocomplete="on" clearable></el-input>
                </el-form-item>
                <el-form-item prop="phone" label="手机号">
                    <el-input ref="phone" type="text" v-model="ruleForm.phone" name="phone" placeholder="请输入手机号"
                        autocomplete="on" clearable></el-input>
                </el-form-item>
                <el-form-item prop="password" label="密码">
                    <el-input key="password" ref="password" type="password" v-model="ruleForm.password" name="password"
                        autocomplete="on" placeholder="请输入密码" clearable show-password></el-input>
                </el-form-item>
                <el-form-item style="width: 100%;text-align: center;">
                    <el-button type="primary" class="cus-submit-btn" native-type="submit"
                        @click.native.prevent="handleSubmit">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 修改店铺 -->
        <el-dialog title="修改店铺" :visible.sync="dialogVisiblePWD" width="40%" :close-on-click-modal="false">
            <el-form :model="pwdForm" :rules="rules_pwd" ref="pwdForm" class="demo-ruleForm cus-login-container"
                label-width="100px">
                <el-form-item prop="storeName" label="店铺名">
                    <el-input ref="storeName" type="text" v-model="pwdForm.storeName" autocomplete="on"></el-input>
                </el-form-item>
                <el-form-item prop="phone" label="手机号">
                    <el-input v-model="pwdForm.phone" auto-complete="off" placeholder="请输入手机号" />
                </el-form-item>
            </el-form>
            <div style="text-align: center;">
                <el-button type="primary" class="cus-submit-btn" native-type="submit"
                    @click.native.prevent="handleChangeStore">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import API from "../../api";
export default {
    name: 'StoreManagementInfo',
    data() {
        return {
            dataLoading: false,
            data: [],
            ruleForm: {
                phone: "",
                storeName: "",
                password: ""
            },
            pwdForm: {
                storeId: "",
                storeName: "",
                phone: "",
                password: ""
            },
            rules: {
                storeName: [{ required: true, message: "请输入账号", trigger: "blur" }],
                password: [{ required: true, message: "请输入密码", trigger: "blur" }],
                phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
            },
            rules_pwd: {
                storeName: [{ required: true, message: "请输入店铺名", trigger: "blur" }],
                phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
            },
            // 与pagination对齐
            pagination: {
                pageSize: 10,
                total: 0,
                current: 1,
            },
            searchValue: '',
            dialogVisible: false,
            dialogVisiblePWD: false
        };
    },
    computed: {
    },
    mounted() {
        this.searchData();
    },

    methods: {
        searchData() {
            const loading = this.$loading({
                lock: true,
                text: this.$t('loading.login'),
                spinner: 'el-icon-loading',
            });
            API.send("storePageInfo", {
                data: {
                    pageNum: this.pagination.current,
                    pageSize: this.pagination.pageSize
                }
            }).then(async (res) => {
                if (res.code !== 200) {
                    this.$message.error(res.msg);
                    loading.close();
                    return;
                }
                this.data = res.data.list;
                this.pagination.total = res.data.total;
                loading.close();
            })
        },
        handleAddStore() {
            this.dialogVisible = true;
            this.$nextTick(() => {
                this.$refs.ruleForm.resetFields();
                this.$refs.ruleForm.clearValidate();
            })
        },
        handleSubmit() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.$confirm('确认新增该店铺?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        const loading = this.$loading({
                            lock: true,
                            text: this.$t('loading.login'),
                            spinner: 'el-icon-loading',
                        });
                        API.send("addStore", {
                            data: {
                                ...this.ruleForm
                            }
                        }).then(async (res) => {
                            if (res.code !== 200) {
                                this.$message({
                                    type: 'error',
                                    message: '新增失败!'
                                });
                                loading.close();
                                return;
                            }
                            loading.close();
                            this.$message({
                                type: 'success',
                                message: '新增成功!'
                            });
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        handleChangeStore() {
            this.$refs.pwdForm.validate((valid) => {
                if (valid) {
                    this.$confirm('确认提交修改店铺申请?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        const loading = this.$loading({
                            lock: true,
                            text: this.$t('loading.login'),
                            spinner: 'el-icon-loading',
                        });
                        API.send("updateStore", {
                            data: {
                                ...this.pwdForm
                            }
                        }).then(async (res) => {
                            if (res.code !== 200) {
                                this.$message({
                                    type: 'error',
                                    message: res.msg
                                });
                                loading.close();
                                return;
                            }
                            loading.close();
                            this.$message({
                                type: 'success',
                                message: '修改成功!'
                            });
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        handleClickChange(row) {
            this.dialogVisiblePWD = true;
            this.pwdForm.storeName = row.storeName;
            this.pwdForm.phone = row.phone;
            this.pwdForm.storeId = row.storeId;
            this.$nextTick(() => {
                this.$refs.pwdForm.resetFields();
                this.$refs.pwdForm.clearValidate();
            })
        },
        handleClickDelete(row) {
            this.$confirm('确认删除该店铺?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const loading = this.$loading({
                    lock: true,
                    text: this.$t('loading.login'),
                    spinner: 'el-icon-loading',
                });
                API.send("deleteStore", {
                    data: {
                        id: row.storeId
                    }
                }).then(async (res) => {
                    if (res.code !== 200) {
                        this.$message({
                            type: 'error',
                            message: '删除失败!'
                        });
                        loading.close();
                        return;
                    }
                    loading.close();
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        handleSizeChange(val) {
            this.pagination.pageSize = val;
            this.searchData();
        },
        handleCurrentChange(val) {
            this.pagination.current = val;
            this.searchData();
        }
    },
};
</script>

<style lang="scss" scoped>
.payment-col {
    display: flex;

    .trend-container {
        display: flex;
        align-items: center;
        margin-left: 8px;
    }
}

.left-operation-container {
    padding: 0 0 6px 0;
    margin-bottom: 16px;

    .selected-count {
        display: inline-block;
        margin-left: 10px;
    }
}

.search-input {
    width: 360px;
    margin-top: 16px;
}

::v-deep .el-pagination {
    .el-pagination__total {
        float: left;
    }

    .btn-prev,
    .el-pager,
    .btn-next {
        float: right;
    }
}
</style>
